<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>待办事项</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      display: flex;
      flex-direction: column;
      height: 100vh;
      color: #333;
    }
    header {
      background-color: #4a6bdf;
      color: white;
      padding: 20px;
      text-align: center;
    }
    h1 {
      margin-bottom: 10px;
      font-size: 24px;
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      flex: 1;
      overflow-y: auto;
    }
    .todo-form {
      display: flex;
      margin-bottom: 20px;
    }
    .todo-input {
      flex: 1;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px 0 0 4px;
      font-size: 16px;
    }
    .todo-btn {
      padding: 10px 15px;
      background-color: #4a6bdf;
      color: white;
      border: none;
      border-radius: 0 4px 4px 0;
      cursor: pointer;
      font-size: 16px;
    }
    .todo-btn:hover {
      background-color: #3a5bcf;
    }
    .filters {
      display: flex;
      margin-bottom: 20px;
      background-color: white;
      border-radius: 4px;
      overflow: hidden;
      border: 1px solid #ddd;
    }
    .filter-btn {
      flex: 1;
      padding: 10px;
      border: none;
      background-color: transparent;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s;
    }
    .filter-btn.active {
      background-color: #4a6bdf;
      color: white;
    }
    .todo-list {
      list-style-type: none;
    }
    .todo-item {
      background-color: white;
      padding: 15px;
      border-radius: 4px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      animation: slideIn 0.3s ease;
      transition: transform 0.3s, opacity 0.3s;
    }
    .todo-item.completed {
      opacity: 0.6;
    }
    .todo-item.deleting {
      transform: translateX(100%);
      opacity: 0;
    }
    .todo-checkbox {
      margin-right: 10px;
      height: 20px;
      width: 20px;
      cursor: pointer;
    }
    .todo-text {
      flex: 1;
      font-size: 16px;
    }
    .todo-item.completed .todo-text {
      text-decoration: line-through;
      color: #999;
    }
    .todo-delete {
      margin-left: 10px;
      background-color: #ff4757;
      color: white;
      border: none;
      border-radius: 4px;
      padding: 5px 10px;
      cursor: pointer;
    }
    .todo-delete:hover {
      background-color: #e03444;
    }
    .empty-state {
      text-align: center;
      padding: 40px 0;
      color: #666;
    }
    .empty-state p {
      margin-top: 10px;
      font-size: 14px;
    }
    .stats {
      text-align: center;
      padding: 15px;
      background-color: white;
      border-radius: 4px;
      margin-top: 20px;
      border: 1px solid #ddd;
    }
    .clear-btn {
      background-color: transparent;
      border: none;
      color: #ff4757;
      cursor: pointer;
      margin-top: 10px;
      padding: 5px;
      font-size: 14px;
    }
    .clear-btn:hover {
      text-decoration: underline;
    }
    
    @keyframes slideIn {
      from {
        transform: translateY(20px);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }
  </style>
</head>
<body>
  <header>
    <h1>待办事项</h1>
  </header>
  
  <div class="container">
    <form class="todo-form" id="todoForm">
      <input type="text" class="todo-input" id="todoInput" placeholder="添加新的待办事项..." autocomplete="off">
      <button type="submit" class="todo-btn">添加</button>
    </form>
    
    <div class="filters">
      <button class="filter-btn active" data-filter="all">全部</button>
      <button class="filter-btn" data-filter="active">未完成</button>
      <button class="filter-btn" data-filter="completed">已完成</button>
    </div>
    
    <ul class="todo-list" id="todoList"></ul>
    
    <div class="empty-state" id="emptyState" style="display: none;">
      <h3>没有待办事项</h3>
      <p>添加一些待办事项开始使用吧！</p>
    </div>
    
    <div class="stats" id="stats">
      <div id="todoCount">总计: 0 项，已完成: 0 项</div>
      <button class="clear-btn" id="clearCompleted">清除已完成</button>
    </div>
  </div>

  <script>
    // 获取SDK
    const AppSDK = window.AppSDK || {};
    
    // DOM元素
    const todoForm = document.getElementById('todoForm');
    const todoInput = document.getElementById('todoInput');
    const todoList = document.getElementById('todoList');
    const emptyState = document.getElementById('emptyState');
    const todoCount = document.getElementById('todoCount');
    const clearCompleted = document.getElementById('clearCompleted');
    const filterButtons = document.querySelectorAll('.filter-btn');
    
    // 应用状态
    let todos = [];
    let filter = 'all';
    
    // 初始化
    async function init() {
      // 加载待办事项
      await loadTodos();
      
      // 注册事件
      todoForm.addEventListener('submit', addTodo);
      clearCompleted.addEventListener('click', clearCompletedTasks);
      
      // 过滤按钮
      filterButtons.forEach(button => {
        button.addEventListener('click', () => {
          filterButtons.forEach(btn => btn.classList.remove('active'));
          button.classList.add('active');
          filter = button.dataset.filter;
          renderTodos();
        });
      });
      
      // 初始渲染
      renderTodos();
    }
    
    // 加载待办事项
    async function loadTodos() {
      if (AppSDK.getData) {
        try {
          const data = await AppSDK.getData('todos');
          if (data) {
            todos = JSON.parse(data) || [];
          }
        } catch (error) {
          console.error('加载待办事项失败:', error);
          todos = [];
        }
      }
    }
    
    // 保存待办事项
    async function saveTodos() {
      if (AppSDK.setData) {
        try {
          await AppSDK.setData('todos', JSON.stringify(todos));
        } catch (error) {
          console.error('保存待办事项失败:', error);
        }
      }
    }
    
    // 添加待办事项
    function addTodo(e) {
      e.preventDefault();
      
      const text = todoInput.value.trim();
      if (text) {
        const todo = {
          id: Date.now(),
          text,
          completed: false,
          createdAt: new Date().toISOString()
        };
        
        todos.unshift(todo);
        todoInput.value = '';
        
        renderTodos();
        saveTodos();
      }
    }
    
    // 切换完成状态
    function toggleTodo(id) {
      todos = todos.map(todo => {
        if (todo.id === id) {
          return { ...todo, completed: !todo.completed };
        }
        return todo;
      });
      
      renderTodos();
      saveTodos();
    }
    
    // 删除待办事项
    function deleteTodo(id) {
      const todoElement = document.querySelector(`.todo-item[data-id="${id}"]`);
      todoElement.classList.add('deleting');
      
      // 动画结束后删除
      setTimeout(() => {
        todos = todos.filter(todo => todo.id !== id);
        renderTodos();
        saveTodos();
      }, 300);
    }
    
    // 清除已完成
    function clearCompletedTasks() {
      todos = todos.filter(todo => !todo.completed);
      renderTodos();
      saveTodos();
    }
    
    // 渲染待办事项
    function renderTodos() {
      // 过滤
      let filteredTodos = todos;
      if (filter === 'active') {
        filteredTodos = todos.filter(todo => !todo.completed);
      } else if (filter === 'completed') {
        filteredTodos = todos.filter(todo => todo.completed);
      }
      
      // 清空列表
      todoList.innerHTML = '';
      
      // 显示空状态
      if (filteredTodos.length === 0) {
        emptyState.style.display = 'block';
      } else {
        emptyState.style.display = 'none';
        
        // 渲染每一项
        filteredTodos.forEach(todo => {
          const li = document.createElement('li');
          li.className = `todo-item ${todo.completed ? 'completed' : ''}`;
          li.dataset.id = todo.id;
          
          li.innerHTML = `
            <input type="checkbox" class="todo-checkbox" ${todo.completed ? 'checked' : ''}>
            <span class="todo-text">${todo.text}</span>
            <button class="todo-delete">删除</button>
          `;
          
          // 添加事件
          const checkbox = li.querySelector('.todo-checkbox');
          checkbox.addEventListener('change', () => toggleTodo(todo.id));
          
          const deleteBtn = li.querySelector('.todo-delete');
          deleteBtn.addEventListener('click', () => deleteTodo(todo.id));
          
          todoList.appendChild(li);
        });
      }
      
      // 更新统计
      const total = todos.length;
      const completed = todos.filter(todo => todo.completed).length;
      todoCount.textContent = `总计: ${total} 项，已完成: ${completed} 项`;
    }
    
    // 初始化
    init();
  </script>
</body>
</html> 